<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>web sql</title>
</head>
<body>
    <div class="list"></div>
    添加数据：<input type="text"> <button onclick="add()">add</button><br>
    更新数据：<button onclick="update()">update</button><br>
    删除数据：<input type="text"> <button onclick="del()">delete</button><br>
    修改<input type="text">为<input type="text"><button onclick="revise()">revise</button>
</body>
<script>
    /*打开数据库（参数）
        1. 数据库名称
        2. 版本号  
        3. 描述文本
        4. 数据库大小
        5. 创建回调
    */
    let db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
    // 获取到展示列表
    let list = document.getElementsByClassName('list')[0];
    let data = document.getElementsByTagName('input');
    // 当前的数据长度
    let len = 0;
    // 初始化数据库
    function init() {
        db.transaction(function (tx) {
            // 创建表
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
            // 插入数据
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
        });
    }
    // 查询数据库
    function update() {
        db.transaction(function (tx) {
            // 查询数据库
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
                // 获取结果的长度
                len = results.rows.length;
                
                for (let i = 0; i < len; i++){
                    let p = document.createElement('p');
                    p.innerText = results.rows.item(i).log;
                    list.appendChild(p);
                }
            }, null);
        });
    }
    // 添加数据
    function add() {
        let data1 = data[0].value;
        db.transaction(function(tx){
            tx.executeSql(`INSERT INTO LOGS (id, log) VALUES (${++len}, ${data1})`);
        })
    }
    // 删除数据
    function del() {
        let data2 = data[1].value;
        len--;
        db.transaction(function(tx){
            tx.executeSql(`DELETE FROM LOGS  WHERE log=${data2}`);
        })
    }
    // 修改数据
    function revise() {
        let data3 = data[2].value;
        let data4 = data[3].value;
        db.transaction(function(tx){
            tx.executeSql(`UPDATE LOGS SET log=${data4} WHERE log=${data3}`);
        })
    }

</script>
</html>